<template>
  <el-form ref="Form" :model="Form" :rules="rules" label-width="120px">
    <el-form-item prop="mailAddress">
      <el-input placeholder="请填写用户名" v-model="Form.username" @blur="sendusername"></el-input>
    </el-form-item>
    <el-form-item  prop="password">
      <el-input placeholder="请输入6-16位密码" v-model="Form.password" @blur="sendPassword" show-password></el-input>
    </el-form-item>
    <el-form-item  prop="checkedpassword">
      <el-input placeholder="再次输入密码" v-model="Form.checkedpassword" @blur="checkedPassword" show-password></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    name: 'regform',
    data() {
      return {
        Form: {
          username: null,
          password:null,
            checkedpassword:null,
        },
        rules: {
          username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
         checkedpassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
        }
      }
    },
    methods: {
      sendusername: function() {
        var username = /^[a-zA-Z0-9_-]{4,16}$/
        if (this.Form.mailAddress != '' && !username.test(this.Form.username)) {
          this.$message({
            message: '用户名格式不正确，请输入4到16位（字母，数字，下划线，减号）',
            type: 'error'
          })
          this.Form.username = '';
        }
        else {
          this.$emit("sureusername",[1,this.Form.username]);//第一个数字表示已经验证完毕
        }
      },
      sendPassword: function() {
        var regPwd = /^(\w){6,16}$/
        if (this.password != '' && !regPwd.test(this.Form.password)) {
          this.$message({
            message: '只能输入6-16个字母、数字、下划线',
            type: 'error'
          })
          this.Form.password= '';
        }
        else {
            this.$emit('surePwd',[1,this.Form.password]);//第一个数字表示已经验证完毕,广播确认的密码
        }
      },
        checkedPassword(){
          var _this=this;
          if(_this.Form.checkedpassword==_this.Form.password){
              this.$emit('sureCheckedPwd',[1,this.Form.checkedpassword]);//第一个数字表示已经验证完毕,广播确认的密码
          }else{
              this.$message({
                  message: '两次输入密码不符',
                  type: 'error'
              })
              this.Form.checkedpassword= '';
          }
        }

    }
  }
</script>
<style scoped>
</style>
